<template>
  <a-layout id="components-layout-demo-custom-trigger" class="app-body min-h-full max-h-screen">
      <Header />
    <a-layout>
      <Sider class="sider-main" />
      <a-layout-content class=" bg-white h-full overflow-auto">
          <!-- <router-view></router-view> -->
          <router-tab :page-transition="{css: false}"/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import Bus from "@common/bus";
export default {
  name: "Model",
  data() {
    return {
      collapsed: false,
    };
  },
  created() {
    Bus.$on("collapsed", item => {
      this.collapsed = item;
    });
  },
};
</script>
<style lang="less">
.custom-tab{
  background-color: #fff;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px !important;
  border-width: 0 !important;
  // height: 30px;
  // margin-right: 10px;
}
.router-tab__header{
  height: 64px;
  .router-tab__scroll{
    height: 100%;
  }
}
.router-tab__item{
  border-bottom: 3px solid #fff !important;
  &.is-active, &:hover{
    color: #DD4C4C !important;
    border-bottom: 3px solid #DD4C4C !important;
  }
  // height: 64px;
  padding: 3px 20px !important;
   .router-tab__item-close {
    margin-left: 4px;
    width: 13px;
}
}
.router-tab-page {
    height: 100%;
}
.sider-main{
  height: calc(100vh - 64px);
}
.logo-title{
  width: 220px;
  height: 64px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  line-height: 64px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.85);
}
</style>